<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智慧园区</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <script src="js/echarts.js"></script>
    <script src="js/hookEcharts.js"></script>
</head>

<body>
    <div class="main">
        <div class="nav">
            <div class="title">智慧园区可视化平台</div>
            <div class="list">
                <ul>
                    <li>营区态势</li>
                    <li>出入管理</li>
                    <li>监控点位</li>
                    <li>能耗管理</li>
                    <li>配置中心</li>
                </ul>
            </div>
            <div class="login">
                <i>2023-03-20 18:57</i>
                <span class="iconfont icon-yonghu-yuan"></span>
                <a href="#">Admin</a>
                <span class="iconfont icon-kaiji"></span>
            </div>
        </div>
        <div class="content">
            <div class="left">
                <div class="left-1">
                    <p>当日能耗</p>
                    <i>Kwh</i>
                    <div class="con-wrap">
                        <div class="num1">
                            <span>4</span>
                        </div>
                        <div class="num2">
                            <span>8</span>
                        </div>
                        <div class="num3">
                            <span>7</span>
                        </div>
                        <div class="num4">
                            <span>3</span>
                        </div>
                        <div class="num5">
                            <span>0</span>
                        </div>
                    </div>
                </div>
                <div class="left-2">
                    <p>小时用能变化</p>
                    <div class="icon">
                        <div class="dian">电</div>
                        <div class="shui">水</div>
                    </div>
                    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
                    <div id="main"></div>
                </div>
                <div class="left-3">
                    <p>日用能趋势</p>
                    <div class="icon">
                        <div class="dian">电</div>
                        <div class="shui">水</div>
                    </div>
                    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
                    <div id="main1"></div>
                </div>
            </div>
            <div class="right">
                <div class="right-1">
                    <div class="panel-little">
                        <p>平均日用量</p>
                        <span class="num">6,876 </span>
                        <span class="danwei">Kwh</span>
                        <div>
                            <p class="gray">按吨日用量</p>
                            <p>2,802</p>
                        </div>
                        <div>
                            <p class="gray">环比变化</p>
                            <p class="green">-1%</p>
                        </div>
                    </div>
                    <div class="panel-little">
                        <p>装机容量</p>
                        <span class="num">96,790 </span>
                        <span class="danwei">Kwh</span>
                        <div>
                            <p class="gray">能耗均值</p>
                            <p>1,834</p>
                        </div>
                        <div>
                            <p class="gray">小时最大能耗</p>
                            <p class="green">2,919</p>
                        </div>
                    </div>
                    <div class="panel">
                        <div class="item1">
                            <div class="chip">
                                <div class="circle1"></div>
                                <div class="circle2"></div>
                                <img src="img/chip.svg" alt="">
                            </div>
                            <span class="count">273</span>
                            <span class="count-text">主变台数</span>
                            <span class="count-danwei">(台)</span>
                        </div>
                        <div class="item1">
                            <div class="chip">
                                <div class="circle1"></div>
                                <div class="circle2"></div>
                                <img src="img/仪表.svg" alt="">
                            </div>
                            <span class="count">50,170</span>
                            <span class="count-text">计量台数</span>
                            <span class="count-danwei">(个)</span>
                        </div>
                        <div class="item1">
                            <div class="chip">
                                <div class="circle1"></div>
                                <div class="circle2"></div>
                                <img src="img/路由器.svg" alt="">
                            </div>
                            <span class="count">101</span>
                            <span class="count-text">网关数量</span>
                            <span class="count-danwei">(个)</span>
                        </div>

                    </div>
                    <div class="panel2">
                        <p>用能分析</p>
                        <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
                        <div id="main3"></div>
                    </div>
                    <div class="panel3">
                        <p>重点关注点位</p>
                        <div class="item">
                            <p>照明系统用电(Kwh)</p>
                            <p class="green">45,313</p>
                        </div>
                        <div class="item">
                            <p>空调系统用电(Kwh)</p>
                            <p class="yellow">24,101</p>
                        </div>
                        <div id="main4"></div>
                    </div>
                </div>
                <div class="right-2">
                    <p>地点能耗情况</p>
                    <div class="line-wrap">
                        <div class="line1" style="width: 190px;height:160px;"></div>
                        <div class="line2" style="width: 190px;height:160px;"></div>
                        <div class="line3" style="width: 190px;height:160px;"></div>
                        <div class="line4" style="width: 190px;height:160px;"></div>
                        <div class="line5" style="width: 190px;height:160px;"></div>
                        <div class="line6" style="width: 190px;height:160px;"></div>
                        <div class="table">
                            <div class="xian"></div>
                            <table>
                                <tbody>
                                    <tr>
                                        <th rowspan="3">一号楼</th>
                                        <td>最大值</td>
                                        </td>
                                        <td>892</td>
                                    </tr>
                                    <tr>
                                        <td>最小值</td>
                                        <td>95</td>

                                    </tr>
                                    <tr>
                                        <td>平均值</td>
                                        <td>344.5</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="table">
                            <div class="xian"></div>
                            <table>
                                <tbody>
                                    <tr>
                                        <th rowspan="3">二号楼</th>
                                        <td>最大值</td>
                                        </td>
                                        <td>892</td>
                                    </tr>
                                    <tr>
                                        <td>最小值</td>
                                        <td>95</td>

                                    </tr>
                                    <tr>
                                        <td>平均值</td>
                                        <td>344.5</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="table">
                            <div class="xian"></div>
                            <table>
                                <tbody>
                                    <tr>
                                        <th rowspan="3">实验室</th>
                                        <td>最大值</td>
                                        </td>
                                        <td>892</td>
                                    </tr>
                                    <tr>
                                        <td>最小值</td>
                                        <td>95</td>

                                    </tr>
                                    <tr>
                                        <td>平均值</td>
                                        <td>344.5</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="table">
                            <div class="xian"></div>
                            <table>
                                <tbody>
                                    <tr>
                                        <th rowspan="3">保安处</th>
                                        <td>最大值</td>
                                        </td>
                                        <td>892</td>
                                    </tr>
                                    <tr>
                                        <td>最小值</td>
                                        <td>95</td>

                                    </tr>
                                    <tr>
                                        <td>平均值</td>
                                        <td>344.5</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="table">
                            <div class="xian"></div>
                            <table>
                                <tbody>
                                    <tr>
                                        <th rowspan="3">食堂</th>
                                        <td>最大值</td>
                                        </td>
                                        <td>892</td>
                                    </tr>
                                    <tr>
                                        <td>最小值</td>
                                        <td>95</td>

                                    </tr>
                                    <tr>
                                        <td>平均值</td>
                                        <td>344.5</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="table">
                            <div class="xian"></div>
                            <table>
                                <tbody>
                                    <tr>
                                        <th rowspan="3">住宿区</th>
                                        <td>最大值</td>
                                        </td>
                                        <td>892</td>
                                    </tr>
                                    <tr>
                                        <td>最小值</td>
                                        <td>95</td>

                                    </tr>
                                    <tr>
                                        <td>平均值</td>
                                        <td>344.5</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        // left-1
        var num5 = document.querySelector('.num5');
        var num = 0;
        // 定时器 间歇定时器
        setInterval(function() {
                var spanOld = document.querySelectorAll('.num5 span');
                if (spanOld.length > 1) {
                    // 移除节点
                    spanOld[0].remove();
                }
                num++;
                if (num > 9) {
                    num = 0;
                }
                // 增加span的元素
                var addSpan = document.createElement('span');
                addSpan.innerText = num;
                // 增加到页面上
                num5.appendChild(addSpan);
                // 获取所有的span元素
                var spans = document.querySelectorAll('.num5 span');
                spans[0].style.animation = 'moveNum2 1s forwards';
                spans[1].style.animation = 'moveNum1 1s forwards';
            }, 2000)
            // left-2
            // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            xAxis: {
                // 值
                type: 'category',
                data: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24],
                axisTick: {
                    show: false
                },
                axisLabel: {
                    textStyle: {
                        color: '#ffffff'
                    }
                }
            },
            yAxis: {
                // 类目
                type: 'value',
                splitLine: {
                    lineStyle: {
                        type: 'dashed'
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: '#ffffff'
                    }
                }
            },
            legend: {
                textStyle: {
                    color: '#ffffff'
                },
                data: ['今日能耗'],
                right: 100
            },
            series: [{
                name: '今日能耗',
                data: [6, 160, 48, 45, 50, 250, 200, 180, 230, 70, 180, 55, 0],
                type: 'line',
                // type: 'bar',
                // 平滑的折线图
                smooth: true,
                // 拐点的样式
                symbol: 'circle',
                // 折线图中拐点的大小
                symbolSize: 5,
                // 拐点的颜色
                itemStyle: {
                    color: '#04E38A',
                },
                // 折线的颜色
                lineStyle: {
                    color: '#04E38A'
                }
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        // left-2
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main1'));

        // 指定图表的配置项和数据
        var option1 = {
            xAxis: {
                // 值
                type: 'category',
                data: ['5.10', 5.11, 5.12, 5.13, 5.14, 5.15, 5.16, 5.17, 5.18],
                axisTick: {
                    show: false
                },
                axisLabel: {
                    textStyle: {
                        color: '#ffffff'
                    }
                }
            },
            yAxis: {
                // 类目
                type: 'value',
                splitLine: {
                    lineStyle: {
                        type: 'dashed'
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: '#ffffff'
                    }
                }
            },
            series: [{
                name: '今日能耗',
                data: [55, 20, 33, 40, 21, 60, 60, 45, 60],
                // type: 'line',
                type: 'bar',
                //柱状的颜色
                itemStyle: {
                    color: 'rgba(7,164,102,0.8)',
                },
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option1);
        // right-饼状图
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main3'));

        // 指定图表的配置项和数据
        var option3 = {
            // 标识信息的样式
            legend: {
                orient: 'vertical',
                top: '30%',
                left: '10%',
                textStyle: {
                    color: '#fff',
                    fontSize: '16px',
                }
            },
            // 提示框
            tooltip: {},
            // 调色盘颜色列表
            color: ['#009DFF', '#22E4FF', '#3BFFD0', '#04E38A', '#9DFF86', '#FEE588'],
            series: [{
                type: 'pie',
                left: '40%',
                // 高亮的样式
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 20,
                        color: '#fff',
                        fontWeight: 'bold'
                    }
                },
                // label线的样式
                label: {

                    show: true,
                    formatter(param) {
                        console.log(param);
                        // correct the percentage
                        // return param.name + ' (' + param.percent * 2 + '%)';
                        return param.percent * 2 + '%';
                    },
                    color: 'white',
                },
                data: [{
                    value: 335,
                    name: '空调系统',
                }, {
                    value: 234,
                    name: '照明系统'
                }, {
                    value: 1548,
                    name: '洗手间'
                }, {
                    value: 1548,
                    name: '监控系统'
                }, {
                    value: 1548,
                    name: '办公室'
                }, {
                    value: 1548,
                    name: '管理处'
                }],
                // 圆环图
                radius: ['50%', '70%']
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option3);
        //right-折柱混合
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main4'));

        // 指定图表的配置项和数据
        var option4 = {
            grid: {
                top: 20,
                bottom: 40,
            },
            xAxis: [{
                type: 'category',
                axisTick: {
                    show: false // 不显示坐标轴刻度线
                },
                axisLabel: {
                    textStyle: {
                        color: '#ffffff'
                    }
                },
                data: ['5月11', '5月12', '5月13', '5月14', '5月15', '5月16', '5月17', '5月18'],
                axisPointer: {
                    type: 'shadow'
                },
            }],
            yAxis: [{
                type: 'value',
                axisLine: {
                    show: true, // 显示坐标轴线
                },
                splitLine: {
                    show: false // 不显示网格线
                },
                // min: 500,
                // max: 4500,
                interval: 1000,
            }, {
                type: 'value',
                axisLine: {
                    show: true, // 显示坐标轴线
                },
                splitLine: {
                    show: false // 不显示网格线
                },
                boundaryGap: true, //设置为true
                // min: 0,
                // max: 3000,
                interval: 1000,
            }],
            series: [{
                name: 'Light',
                type: 'bar',
                barWidth: 20,
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(
                        // (x1,y2) 点到点 (x2,y2) 之间进行渐变
                        0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgb(3,232,142)'
                            }, // 0 起始颜色
                            {
                                offset: 1,
                                color: 'rgb(136,255,241)'
                            } // 1 结束颜色
                        ]
                    ),
                },
                data: [3000, 4500, 1600, 2600, 2500, 3500, 3200, 2900]
            }, {
                name: 'Conditioner',
                type: 'line',
                // 平滑的折线图
                smooth: true,
                // 拐点的样式
                symbol: 'circle',
                // 折线图中拐点的大小
                symbolSize: 0,
                // 拐点的颜色
                itemStyle: {
                    color: '#04E38A',
                },
                // 折线的颜色
                lineStyle: {
                    color: 'rgb(247,241,0)'
                },
                yAxisIndex: 1,
                data: [2200, 3400, 1300, 2000, 1900, 2600, 2400, 2150]
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option4);

        //right-2
        var lines = document.querySelectorAll('.line-wrap div');
        var optionSet1 = {
            grid: {
                // 是否显示直角坐标系的网格  true/false
                // show: true,
                // 放置溢出
                containLabel: true,
                // left:图标距离容器左侧的距离  百分比/number
                // left: '10%',
                // right: '20%',
                bottom: '10%',
                top: '10%'

            },
            xAxis: {
                // 值
                type: 'category',

                axisTick: {
                    show: false
                },
                axisLabel: {
                    textStyle: {
                        color: '#ffffff'
                    }
                },
                data: [0, 6, 12, 18, 24]
            },
            yAxis: {
                // 类目
                type: 'value',
                splitLine: {
                    lineStyle: {
                        type: 'dashed'
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: '#ffffff'
                    }
                }
            },
            series: [{
                data: [0, 200, 700, 500, 20],
                type: 'line',
                // 平滑的折线图
                smooth: true,
                // 拐点的样式
                symbol: 'circle',
                // 折线图中拐点的大小
                symbolSize: 5,
                // 拐点的颜色
                itemStyle: {
                    color: '#04E38A',
                },
                // 折线的颜色
                lineStyle: {
                    color: '#04E38A'
                }
            }]
        };
        var optionSet2 = {
            grid: {
                // 是否显示直角坐标系的网格  true/false
                // show: true,
                // 放置溢出
                containLabel: true,
                // left:图标距离容器左侧的距离  百分比/number
                // left: '10%',
                // right: '20%',
                bottom: '10%',
                top: '10%'

            },
            xAxis: {
                // 值
                type: 'category',

                axisTick: {
                    show: false
                },
                axisLabel: {
                    textStyle: {
                        color: '#ffffff'
                    }
                },
                data: [0, 6, 12, 18, 24]
            },
            yAxis: {
                // 类目
                type: 'value',
                splitLine: {
                    lineStyle: {
                        type: 'dashed'
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: '#ffffff'
                    }
                }
            },
            series: [{
                data: [0, 200, 700, 500, 20],
                type: 'line',
                // 平滑的折线图
                smooth: true,
                // 拐点的样式
                symbol: 'circle',
                // 折线图中拐点的大小
                symbolSize: 5,
                // 拐点的颜色
                itemStyle: {
                    color: '#04E38A',
                },
                // 折线的颜色
                lineStyle: {
                    color: '#04E38A'
                }
            }]
        };
        var optionSet3 = {
            grid: {
                // 是否显示直角坐标系的网格  true/false
                // show: true,
                // 放置溢出
                containLabel: true,
                // left:图标距离容器左侧的距离  百分比/number
                // left: '10%',
                // right: '20%',
                bottom: '10%',
                top: '10%'

            },
            xAxis: {
                // 值
                type: 'category',

                axisTick: {
                    show: false
                },
                axisLabel: {
                    textStyle: {
                        color: '#ffffff'
                    }
                },
                data: [0, 6, 12, 18, 24]
            },
            yAxis: {
                // 类目
                type: 'value',
                splitLine: {
                    lineStyle: {
                        type: 'dashed'
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: '#ffffff'
                    }
                }
            },
            series: [{
                data: [200, 200, 400, 90, 90],
                type: 'line',
                // 平滑的折线图
                smooth: true,
                // 拐点的样式
                symbol: 'circle',
                // 折线图中拐点的大小
                symbolSize: 5,
                // 拐点的颜色
                itemStyle: {
                    color: '#04E38A',
                },
                // 折线的颜色
                lineStyle: {
                    color: '#04E38A'
                }
            }]
        };
        var optionSet4 = {
            grid: {
                // 是否显示直角坐标系的网格  true/false
                // show: true,
                // 放置溢出
                containLabel: true,
                // left:图标距离容器左侧的距离  百分比/number
                // left: '10%',
                // right: '20%',
                bottom: '10%',
                top: '10%'

            },
            xAxis: {
                // 值
                type: 'category',

                axisTick: {
                    show: false
                },
                axisLabel: {
                    textStyle: {
                        color: '#ffffff'
                    }
                },
                data: [0, 6, 12, 18, 24]
            },
            yAxis: {
                // 类目
                type: 'value',
                splitLine: {
                    lineStyle: {
                        type: 'dashed'
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: '#ffffff'
                    }
                }
            },
            series: [{
                data: [300, 350, 700, 90, 90],
                type: 'line',
                // 平滑的折线图
                smooth: true,
                // 拐点的样式
                symbol: 'circle',
                // 折线图中拐点的大小
                symbolSize: 5,
                // 拐点的颜色
                itemStyle: {
                    color: '#04E38A',
                },
                // 折线的颜色
                lineStyle: {
                    color: '#04E38A'
                }
            }]
        };
        var optionSet5 = {
            grid: {
                // 是否显示直角坐标系的网格  true/false
                // show: true,
                // 放置溢出
                containLabel: true,
                // left:图标距离容器左侧的距离  百分比/number
                // left: '10%',
                // right: '20%',
                bottom: '10%',
                top: '10%'

            },
            xAxis: {
                // 值
                type: 'category',

                axisTick: {
                    show: false
                },
                axisLabel: {
                    textStyle: {
                        color: '#ffffff'
                    }
                },
                data: [0, 6, 12, 18, 24]
            },
            yAxis: {
                // 类目
                type: 'value',
                splitLine: {
                    lineStyle: {
                        type: 'dashed'
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: '#ffffff'
                    }
                }
            },
            series: [{
                data: [400, 600, 200, 500, 0],
                type: 'line',
                // 平滑的折线图
                smooth: true,
                // 拐点的样式
                symbol: 'circle',
                // 折线图中拐点的大小
                symbolSize: 5,
                // 拐点的颜色
                itemStyle: {
                    color: '#04E38A',
                },
                // 折线的颜色
                lineStyle: {
                    color: '#04E38A'
                }
            }]
        };
        var optionSet6 = {
            grid: {
                // 是否显示直角坐标系的网格  true/false
                // show: true,
                // 放置溢出
                containLabel: true,
                // left:图标距离容器左侧的距离  百分比/number
                // left: '10%',
                // right: '20%',
                bottom: '10%',
                top: '10%'

            },
            xAxis: {
                // 值
                type: 'category',

                axisTick: {
                    show: false
                },
                axisLabel: {
                    textStyle: {
                        color: '#ffffff'
                    }
                },
                data: [0, 6, 12, 18, 24]
            },
            yAxis: {
                // 类目
                type: 'value',
                splitLine: {
                    lineStyle: {
                        type: 'dashed'
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: '#ffffff'
                    }
                }
            },
            series: [{
                data: [0, 60, 0, 500, 600],
                type: 'line',
                // 平滑的折线图
                smooth: true,
                // 拐点的样式
                symbol: 'circle',
                // 折线图中拐点的大小
                symbolSize: 5,
                // 拐点的颜色
                itemStyle: {
                    color: '#04E38A',
                },
                // 折线的颜色
                lineStyle: {
                    color: '#04E38A'
                }
            }]
        };
        echartsUtils(lines[0], optionSet1)
        echartsUtils(lines[1], optionSet2)
        echartsUtils(lines[2], optionSet3)
        echartsUtils(lines[3], optionSet4)
        echartsUtils(lines[4], optionSet5)
        echartsUtils(lines[5], optionSet6)
    </script>
</body>

</html>